<template>
    <div class="main">
        <div class="title">
            <el-breadcrumb separator="/">
            <el-breadcrumb-item>资料管理</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">住户管理</a></el-breadcrumb-item>
            <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content">
            住户管理
        </div>
        <div class="big-top">
            <div class="search-box">
                <div class="search">
                    <span>住户类型</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in option"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <div class="search-btn">
                        <span>住户状态</span>
                        <el-select v-model="value1" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value1"
                        :label="item.label1"
                        :value="item.value1">
                        </el-option>
                    </el-select>
                    </div>
                </div>
                <div class="search-bottom">
                    <div class="dates">
                        <span>提交日期</span>
                        <div class="blocks">
                            <el-date-picker
                            v-model="value3"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        <span class="today">今日</span>
                        <span class="today">昨日</span>
                        <span class="today">最近7天</span>
                        <span class="today">最近30天</span>
                    </div>
                    <div class="searchs">
                        <el-button type="primary" @click="search()">查询</el-button>
                        <el-button @click="reset()">重置</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="tops">
                <span>住户列表</span>
                <div class="rights">
                    <el-button type="primary" @click="jump()">+ 新建</el-button>
                    <el-button>批量操作</el-button>
                </div>
            </div>
            <div class="bottom">
                <el-table
                    ref="multipleTable"
                    :data="lists"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55" 
                        >
                    </el-table-column>
                    <el-table-column
                        :prop="value"
                        :label="key"
                        v-for="(key,value) in tableData" :key="key"
                        width="140">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <div class="block">
                    <el-pagination
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-sizes="[10]"
                    :total="page"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    background>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            lists:[],
            page:1,
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 1,
            tableData: {"taskname": "任务名称", "patrolperson": "巡更人员", "patroltime": "巡更时间","executionstatus": "执行状态","remindertime": "提醒时间","relatedplan": "关联计划"},
                multipleSelection: [],
            option: [{
                value: '全部',
                label: '全部'
                }, {
                value: '业主',
                label: '业主'
                }, {
                value: '亲戚',
                label: '亲戚'
                },
                {
                value: '租户',
                label: '租户'
                },
                {
                value: '朋友',
                label: '朋友'
                }
                ],
            options: [{
            value1: '全部',
            label1: '全部'
            }, {
            value1: '审核中',
            label1: '审核中'
            }, {
            value1: '已认证',
            label1: '已认证'
            },
            {
            value1: '认证失败',
            label1: '认证失败'
            }
            ],
            value: '',
            value1:'',
            input: '',
            value3: '',
        }
    },
    methods:{
        handleEdit(index, row) {
                console.log(index, row);
            },
        handleDelete(index, row) {
            console.log(index, row);
        },
        handleSelectionChange(val) {
        this.multipleSelection = val;
        },
        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage4 = val;
        },
        // jump(){
        //     if(this.$route.name!='newBuilding'){
        //         this.$router.push({
        //             path: '/index/newBuilding'
        //         })
        //     }else{
        //         console.log('已进入');
        //     }
        // },
        getData(){
            axios.get("http://localhost:8085/user/mission").then(res=>{
                console.log(res);
                this.page=res.data.length
                this.lists=res.data.splice(0,10)
            }).catch(error=>{
                console.log(error);
            })
        },
        search() {
            const title = this.input.trim();
            if (!title) {
                this.$message({
                    type: 'warning',
                    message: '请输入公告标题'
                });
                // return;
            }else{
                // this.$loading({ fullscreen: true });
                axios.get(`http://localhost:8085/user/search2?title=${title}`).then(res => {
                    // this.$loading().close();
                    console.log(res);
                    this.lists = res.data;
                    this.$message({
                        type: 'success',
                        message: '搜索成功!'
                    });
                }).catch(error => {
                    // this.$loading().close();
                    console.error(error);
                    this.$message({
                        type: 'error',
                        message: '搜索失败: ' + error.message
                    });
                });
            }
        },
        reset(){
            this.input = ''
            this.getData()
        }
    },
    
    mounted(){
        this.getData()
    },
    watch:{
        currentPage4:{
            handler(val) {
                axios.get("http://localhost:8085/user/mission").then(res=>{
                    console.log(res);
                    this.lists=res.data.splice((val-1)*10,10)
                }).catch(error=>{
                    console.log(error);
                })
            },
        }
    },
}
</script>

<style scoped lang="scss">
.main{
    margin: 0px;
    background-image: none;
    position: relative;
    left: -24px;
    width: 1136px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    // height: 97px;
    
    .title{
        margin-top: 20px;
        padding: 16px 0 0 32px;
        background-color: #fff;
    }
    .content{
        font-weight: 700;
        background-color: #fff;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.847058823529412);
        padding: 16px 0 16px 32px;
        border-bottom: 1px solid rgba(233, 233, 233, 1);;
    }
    .big-top{
        background-color: #fff;
        height: 137px;
        padding: 1px 32px 0;
        
        span{
            display: inline-block;
            width: 90px !important;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.847058823529412);
            margin-right: 15px;
        }
        .today{
            display: inline-block;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.647058823529412);
            margin: 0 15px;
            width: 60px  !important;
            text-align: center;
        }
    }
    .search-box{
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        .search{
            display: flex;
            width: 900px;
            margin-top: 20px;
            align-items: center;
            span{
                display: inline-block;
                width: 90px !important;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.847058823529412);
                margin-right: 15px;
            }
        }
        .searchs{
            width: 160px;
        }
    }
    .footer{
        margin-top: 15px;
        background-color: #fff;
        padding: 16px 32px;
        .tops{
            display: flex;
            justify-content: space-between;
            
        }
    }
}
.search-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search-btn{
    margin-left: 15px !important;
    display: flex;
    width: 360px;
    align-items: center;
    justify-content: space-between;
}
.search-btn{
    ::v-deep .el-input{
    width: 250px !important;
}
}
.block{
    margin-top: 40px;
}
.el-select.el-select--mini{
    display: flex;
    justify-content: flex-end !important;
}
.dates{
    display: flex;
    align-items: center;
    margin: 20px 0;
}
</style>